<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>大转盘</title>
    <script type="text/javascript" src="__PUBLIC__/js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/jQueryRotate.2.2.js"></script>
    <style type="text/css">
        .demo{width:417px; height:417px; position:relative; margin:50px auto}
        #disk{width:417px; height:417px; background:url(__PUBLIC__/images/disk.jpg) no-repeat}
        #start{width:163px; height:320px; position:absolute; top:46px; left:130px;}
        #start img{cursor:pointer}
    </style>
    <script type="text/javascript">
        $(function(){
            $("#startbtn").click(function(){
                $.ajax({
                    type: 'POST',
                    url: "{:U('getaward')}",
                    dataType: 'json',
                    ifModified :true,
                    cache: false,
                    error: function(){
                        alert('出错了！');
                        return false;
                    },
                    success:function(json){
                        //$("#startbtn").unbind('click').css("cursor","default");
                        var a = json.angle; //角度
                        var p = json.prize; //奖项
                        $("#startbtn").rotate({
                            duration:3000, //转动时间
                            angle: 0,
                            animateTo:1800+a, //转动角度
                            easing: $.easing.easeOutSine,
                            callback: function(){
                                alert('恭喜你，中得'+p+'\n');
                                location.reload();
                            }
                        });
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="demo">
    <div id="disk"></div>
    <div id="start"><img src="__PUBLIC__/images/start.png" id="startbtn"></div>
</div>
</body>
</html>